<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>门票管理</title>
  <!--引入的vue.js-->
  <script src="/js/vue.js"></script>
  <!--引入elementUI的css-->
  <link type="text/css" rel="stylesheet" href="/css/index.css">
  <!--引入elementUI的js-->
  <script src="/js/index.js"></script>
  <!--引入axios.js-->
  <script src="/js/axios.min.js"></script>

  <style>
    .search-container {
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f5f7fa;
      border-radius: 4px;
    }
    .form-section {
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 20px;
      padding-bottom: 15px;
    }
    .form-section-title {
      font-weight: bold;
      color: #409EFF;
      margin-bottom: 15px;
      font-size: 16px;
    }
    .table-container {
      margin-top: 20px;
    }
    .action-buttons {
      display: flex;
      gap: 5px;
    }
    .pagination-container {
      margin-top: 20px;
      text-align: right;
    }
    .dialog-footer {
      text-align: right;
    }
    .status-tag {
      margin-right: 5px;
    }
    /* 订单列表弹窗样式 */
    .order-dialog-table {
      max-height: 400px;
      overflow-y: auto;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 搜索框 -->
  <div class="search-container">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-input v-model="searchForm.ticketName" placeholder="请输入门票名称" clearable></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchForm.scenicId" placeholder="请选择景区" clearable>
          <el-option
                  v-for="item in scenicOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchForm.ticketType" placeholder="请选择门票类型" clearable>
          <el-option label="成人票" value="成人票"></el-option>
          <el-option label="儿童票" value="儿童票"></el-option>
          <el-option label="学生票" value="学生票"></el-option>
          <el-option label="老年票" value="老年票"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加门票</el-button>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>


  <div class="table-container">
    <el-table :data="tableData" style="width: 100%" v-loading="loading" stripe>
      <el-table-column prop="ticketId" label="门票ID" width="80"></el-table-column>
      <el-table-column prop="scenicId" label="景区ID" width="80"></el-table-column>
      <el-table-column prop="ticketName" label="门票名称" width="150"></el-table-column>
      <el-table-column prop="ticketType" label="门票类型" width="100"></el-table-column>
      <el-table-column prop="ticketStartrq" label="开始日期" width="120">
        <template slot-scope="scope">
          {{ formatDate(scope.row.ticketStartrq) }}
        </template>
      </el-table-column>
      <el-table-column prop="ticketEndrq" label="结束日期" width="120">
        <template slot-scope="scope">
          {{ formatDate(scope.row.ticketEndrq) }}
        </template>
      </el-table-column>
      <el-table-column prop="ticketOprice" label="原价" width="80"></el-table-column>
      <el-table-column prop="ticketDprice" label="折扣价" width="80"></el-table-column>
      <el-table-column prop="ticketDpj" label="点评分数" width="100"></el-table-column>
      <el-table-column label="限购信息" width="150">
        <template slot-scope="scope">
          <div>单日总量: {{ scope.row.ticketMaxdaysell }}</div>
          <div>单日每人: {{ scope.row.ticketMaxdaypersonsell }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="210" fixed="right">
        <template slot-scope="scope">
          <div class="action-buttons">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 添加/更新门票弹窗 -->
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="800px" :before-close="handleDialogClose">
    <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="max-height: 60vh; overflow-y: auto;">
      <div class="form-section">
        <div class="form-section-title">基本信息</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="景区ID" prop="scenicId">
              <el-select v-model="form.scenicId" placeholder="请选择景区" clearable>
                <el-option
                        v-for="item in scenicOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="门票名称" prop="ticketName">
              <el-input v-model="form.ticketName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门票类型" prop="ticketType">
              <el-select v-model="form.ticketType" placeholder="请选择门票类型">
                <el-option label="成人票" value="成人票"></el-option>
                <el-option label="儿童票" value="儿童票"></el-option>
                <el-option label="学生票" value="学生票"></el-option>
                <el-option label="老年票" value="老年票"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始日期" prop="ticketStartrq">
              <el-date-picker
                      v-model="form.ticketStartrq"
                      type="date"
                      placeholder="选择开始日期"
                      value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="ticketEndrq">
              <el-date-picker
                      v-model="form.ticketEndrq"
                      type="date"
                      placeholder="选择结束日期"
                      value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="原价" prop="ticketOprice">
              <el-input-number v-model="form.ticketOprice" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="折扣价" prop="ticketDprice">
              <el-input-number v-model="form.ticketDprice" :min="0" :step="0.1"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="form-section">
        <div class="form-section-title">销售信息</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="支付类型" prop="ticketPtype">
              <el-select v-model="form.ticketPtype" placeholder="请选择支付类型">
                <el-option label="在线支付" value="在线支付"></el-option>
                <el-option label="景区支付" value="现场支付"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否当日显示" prop="ticketIstodayshow">
              <el-select v-model="form.ticketIstodayshow" placeholder="请选择是否当日显示">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="有效期(天)" prop="ticketFkqx">
              <el-input-number v-model="form.ticketFkqx" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取票期限(小时)" prop="ticketQpqx">
              <el-input-number v-model="form.ticketQpqx" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="取票方式" prop="ticketQptype">
              <el-select v-model="form.ticketQptype" placeholder="请选择取票方式">
                <el-option label="现场取票" value="现场取票"></el-option>
                <el-option label="电子票" value="电子票"></el-option>
                <el-option label="快递邮寄" value="快递邮寄"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否固定" prop="ticketIsgd">
              <el-select v-model="form.ticketIsgd" placeholder="请选择是否固定">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="form-section">
        <div class="form-section-title">限购信息</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单日最大销售量" prop="ticketMaxdaysell">
              <el-input-number v-model="form.ticketMaxdaysell" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单日每人限购" prop="ticketMaxdaypersonsell">
              <el-input-number v-model="form.ticketMaxdaypersonsell" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单次最大交易量" prop="ticketMaxsingledeal">
              <el-input-number v-model="form.ticketMaxsingledeal" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点评分数" prop="ticketDpj">
              <el-input-number v-model="form.ticketDpj" :min="0" :max="5" :step="0.1"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button @click="resetForm('form')">重 置</el-button>
      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
    </div>
  </el-dialog>

  <!-- 分页 -->
  <div class="pagination-container">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20,100,200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        scenicOptions: [],  // 景区下拉选项
        activeIndex: "1",
        tableData: [], // 列表数据
        currentPage: 1, // 分页参数 第几页
        pageSize: 10, // 分页参数 每页显示的总条数
        total: 0, // 分页参数，列表总条数
        loading: false, // 加载状态
        searchForm: {
          ticketName: '',
          scenicId: '',
          ticketType: ''
        },
        dialogFormVisible: false,
        title: '添加门票',
        form: {
          ticketId: null,
          scenicId: null,
          ticketName: '',
          ticketType: '',
          ticketStartrq: '',
          ticketEndrq: '',
          ticketOprice: 0,
          ticketDprice: 0,
          ticketPtype: '',
          ticketFkqx: 1,
          ticketQpqx: 1,
          ticketIstodayshow: '是',
          ticketQptype: '现场取票',
          ticketDpj: 0,
          ticketIsgd: '是',
          ticketMaxdaysell: 0,
          ticketMaxdaypersonsell: 0,
          ticketMaxsingledeal: 0
        },
        rules: {
          scenicId: [
            { required: true, message: '请输入景区ID', trigger: 'blur' }
          ],
          ticketName: [
            { required: true, message: '请输入门票名称', trigger: 'blur' },
            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
          ],
          ticketType: [
            { required: true, message: '请选择门票类型', trigger: 'change' }
          ],
          ticketStartrq: [
            { required: true, message: '请选择开始日期', trigger: 'change' }
          ],
          ticketEndrq: [
            { required: true, message: '请选择结束日期', trigger: 'change' }
          ],
          ticketOprice: [
            { required: true, message: '请输入原价', trigger: 'blur' }
          ],
          ticketDprice: [
            { required: true, message: '请输入折扣价', trigger: 'blur' }
          ],
          ticketPtype: [
            { required: true, message: '请选择支付类型', trigger: 'change' }
          ],
          ticketFkqx: [
            { required: true, message: '请输入有效期', trigger: 'blur' }
          ],
          ticketQpqx: [
            { required: true, message: '请输入取票期限', trigger: 'blur' }
          ]
        }
      }
    },
    // 页面加载的时候执行
    created() {
      this.loadData();
      this.loadScenicOptions();  // 加载景区数据
      // 如果URL有ticketId参数，自动加载该门票详情（从景区页面跳转过来时）
      const urlParams = new URLSearchParams(window.location.search);
      const ticketId = urlParams.get('ticketId');
      if (ticketId) {
        this.loadTicketDetail(ticketId);
      }
    },
    methods: {
      loadData() {
        this.loading = true;
        let _this = this;
        axios.post('/ticket/queryByPage', {
          "pageNo": this.currentPage,
          "pageSize": this.pageSize,
          "data": this.searchForm
        })
                .then(function(response) {
                  if (response.data.code == 200) {
                    _this.tableData = response.data.data.list;
                    _this.total = response.data.data.total;
                  }
                })
                .catch(function(error) {
                  console.log(error);
                  _this.$message.error('数据加载失败');
                })
                .finally(function() {
                  _this.loading = false;
                });
      },
      // 加载景区下拉选项数据 - 关键修改点
      loadScenicOptions() {
        let _this = this;
        // 使用后端实际提供的接口地址 /scenic/frontQueryAll
        axios.get('/scenic/frontQueryAll')
                .then(function(response) {
                  if (response.data.code == 200) {
                    // 根据后端Scenic实体类的字段名进行映射
                    // 假设Scenic类有scenicId和scenicName字段
                    _this.scenicOptions = response.data.data.map(item => ({
                      label: item.scenicName,  // 景区名称
                      value: item.scenicId     // 景区ID
                    }));
                  } else {
                    _this.$message.warning('获取景区列表失败: ' + response.data.msg);
                  }
                })
                .catch(function(error) {
                  console.log('景区数据加载失败:', error);
                  if (error.response && error.response.status === 404) {
                    _this.$message.error('景区列表接口不存在，请检查URL是否正确');
                  } else {
                    _this.$message.error('景区数据加载失败: ' + (error.message || '网络错误'));
                  }
                });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.loadData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.loadData();
      },
      // 搜索功能
      search() {
        this.currentPage = 1;
        this.loadData();
      },
      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let uri = '/ticket/add';
            if (this.title == '更新信息') {
              uri = '/ticket/update';
            }
            let _this = this;
            axios.post(uri, this.form)
                    .then(function(response) {
                      if (response.data.code == 200) {
                        _this.$message({
                          message: '操作成功',
                          type: 'success'
                        });
                        _this.loadData();
                        _this.dialogFormVisible = false;
                      } else {
                        _this.$message.error('操作失败: ' + response.data.msg)
                      }
                    })
                    .catch(function(error) {
                      console.log(error);
                      _this.$message.error('操作出错: ' + error.message);
                    });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 处理添加,弹出添加对话框
      handleAdd() {
        this.dialogFormVisible = true;
        this.title = '添加门票';
        this.form = {
          ticketId: null,
          scenicId: null,
          ticketName: '',
          ticketType: '',
          ticketStartrq: '',
          ticketEndrq: '',
          ticketOprice: 0,
          ticketDprice: 0,
          ticketPtype: '',
          ticketFkqx: 1,
          ticketQpqx: 1,
          ticketIstodayshow: '是',
          ticketQptype: '现场取票',
          ticketDpj: 0,
          ticketIsgd: '是',
          ticketMaxdaysell: 0,
          ticketMaxdaypersonsell: 0,
          ticketMaxsingledeal: 0
        };
      },
      // 处理更新
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        this.title = '更新信息';
        this.form = JSON.parse(JSON.stringify(row));
      },
      // 处理删除
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该门票, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
                .then(() => {
                  let _this = this;
                  axios.delete('/ticket/deleteById?ticketId=' + row.ticketId)
                          .then(function(response) {
                            if (response.data.code == 200) {
                              _this.$message({
                                message: '删除成功',
                                type: 'success'
                              });
                              _this.loadData();
                            } else {
                              _this.$message.error('删除失败: ' + response.data.msg)
                            }
                          })
                          .catch(function(error) {
                            console.log(error);
                            _this.$message.error('删除出错: ' + error.message);
                          });
                }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        });
      },
      // 处理对话框关闭
      handleDialogClose(done) {
        this.$confirm('确认关闭？未保存的数据将会丢失')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
      },
      // 格式化日期
      formatDate(date) {
        if (!date) return '';
        const d = new Date(date);
        return d.getFullYear() + '-' +
                (d.getMonth() + 1).toString().padStart(2, '0') + '-' +
                d.getDate().toString().padStart(2, '0');
      },

      // 加载指定门票详情（从景区页面跳转时使用）
      loadTicketDetail(ticketId) {
        this.loading = true;
        const _this = this;
        axios.get(`/ticket/queryById?ticketId=${ticketId}`)
                .then(response => {
                  if (response.data.code === 200) {
                    // 跳转到编辑页面
                    _this.handleEdit(null, response.data.data);
                  } else {
                    _this.$message.error('获取门票详情失败: ' + response.data.msg);
                  }
                })
                .catch(error => {
                  console.error('获取门票详情失败:', error);
                  _this.$message.error('网络错误或接口异常');
                })
                .finally(() => {
                  _this.loading = false;
                });
      }
    }
  });
</script>
</body>
</html>
